<template>
  <!-- index.wxml -->
  <view class="container">
    <view class="headerCon">
      <view class="search">
        <view class="flex-box flex-box-v-center searchCon"
              @tap="boxClick">
          <view class="icon">
            <image src="/static/static/image/search.png"></image>
          </view>
          <view class="text flex-item-1 font_s_28 font_c_8e">雨伞雨具</view>
          <view class="icon">
            <image src="/static/static/image/camera.png"></image>
          </view>
        </view>
      </view>
      <!-- <y-search placeholder="雨伞雨具" bind:boxClick="boxClick"></y-search> -->
      <view class="filtrateCon">
        <view class="flex-box">
          <view @tap="filtrateActiveClick(1)"
                :class="'flex-item-1 filtrateText font_c_45 font_s_28 ' + (filtrateActive==1?'active':'')">
            <text>价格</text>
            <text class="iconfont iconshangxia filtrateTextIcon"></text>
          </view>
          <view @tap="filtrateActiveClick(2)"
                :class="'flex-item-1 filtrateText font_c_45 font_s_28 ' + (filtrateActive==2?'active':'')">
            <text>折扣</text>
            <text class="iconfont iconshangxia filtrateTextIcon"></text>
          </view>
          <view @tap="filtrateActiveClick(3)"
                :class="'flex-item-1 filtrateText font_c_45 font_s_28 ' + (filtrateActive==3?'active':'')">
            <text>品牌</text>
            <text class="iconfont iconpinpai filtrateTextIcon"></text>
          </view>
          <view @tap="filtrateActiveClick(4)"
                :class="'flex-item-1 filtrateText font_c_45 font_s_28 ' + (filtrateActive==4?'active':'')">
            <text>筛选</text>
            <text class="iconfont iconshaixuan filtrateTextIcon"></text>
          </view>
        </view>
      </view>
    </view>
    <scroll-view class="goodsListS bg_f7"
                 scroll-y
                 @scroll="scroll"
                 @scrolltolower="getSearchProductsMore">
      <view class="l_container">
        <view class="l_row">
          <view @tap="linkDetail"
                class="l_col-3"
                v-for="(item, index) in 15"
                :key="index">
            <view class="goodsCon">
              <view class="goodsConImageCon">
                <image class="tagIcon rightTop"
                       mode="widthFix"
                       src="/static/static/image/new.png"></image>
                <image mode="widthFix"
                       src="./../../static/image/296866_00.jpg"></image>
                <!-- <image wx:if="{{item.stock == 0}}" class="sale_out" mode="widthFix" src="./../../../static/image/sale_out.png"></image> -->
              </view>
              <view class="integral flex-box font_s_28">
                <view class="flex-item-1 font_w_900">
                  <text class="integralText money font_c_pink">￥299</text>
                  <text class="integralText money  del font_c_91 font_s_22">￥398</text>
                </view>
              </view>
              <view class="goodsTitle font_s_28 font_c_main van-ellipsis">
                <text>小孩纸</text>
              </view>
              <view class="subheading font_s_22 font_c_91">漂亮的小孩纸，哈哈哈</view>
              <view class="tagCon flex-box">
                <view class="tag font_c_pink font_s_22">可爱</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="shopCart flex-box">
      <view class="collect">
        <view>
          <text class="iconfont iconshoucang shopcart_icon"></text>
        </view>
      </view>
      <view class="flex-item-1"
            @tap.stop="linkShopCart">
        <text class="cartAmount font_c_red bg_main">3</text>
        <view>
          <text class="iconfont iconcart shopcart_icon"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp().globalData

export default {
  data() {
    return {
      filtrateActive: 1
    }
  },

  components: {},
  props: {},
  onLoad: function() {},
  methods: {
    scroll() {},

    getSearchProductsMore() {
      console.log('触底加载')
    },

    //筛选事件处理函数
    filtrateActiveClick: function(active) {
      this.filtrateActive = active
    },

    //跳转到搜索
    boxClick() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },

    //跳转到商品详情
    linkDetail() {
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail'
      })
    },

    //跳转到购物车
    linkShopCart() {
      uni.switchTab({
        url: '/pages/cart/cart'
      })
    }
  }
}
</script>
<style>
@import './goodsList.css';
</style>